<template>
	<view class="login-container">
		<view class="header">
			<van-image fit="cover" width="100%" height="500rpx" src="https://www.ylsfc.com/image/bg-login.png" />
			<view class="header-text">
				<view class="text-[48rpx] text-[#fff] font-bold pb-[24rpx]">HELLO!</view>
				<view class="text-[38rpx] text-[#fff]">
					欢迎您使用一路顺风车
				</view>
			</view>
		</view>
		<view class="input-container">
			<view class="mb-[40rpx]">
				<van-field left-icon="/static/image/account.png" :value="account" placeholder="请输入您的手机号" :border="false"
					@blur="onChangeAccount" />
			</view>
			<view class="mb-[40rpx]">
				<van-field left-icon="/static/image/password.png" :password="true" :value="password"
					placeholder="请输入您的登录密码" :border="false" @change="onChangePassword" />
			</view>
			<view class="mb-[40rpx]">
				<van-field left-icon="/static/image/name.png" :value="referrerName" placeholder="请输入推荐人姓名"
					:border="false" @change="onChangeName" />
			</view>
			<view class="mb-[40rpx]">
				<van-field left-icon="/static/image/phone.png" :value="referrerPhone" placeholder="请输入推荐人手机号码"
					:border="false" @blur="onChangePhone" />
			</view>
			<van-button type="primary" color="#2675e6" round block @click="handleLogin">立即注册</van-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		validatePhoneNumber
	} from '@/utils/index.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		userApi
	} from '@/api/index.js'
	const account = ref('');
	const password = ref('');
	const referrerName = ref('');
	const referrerPhone = ref('');
	const currentOpenId = ref('');

	//注册手机号
	const onChangeAccount = (e) => {
		let res = validatePhoneNumber(e.detail.value);
		if (res) {
			console.log(e.detail.value)
			account.value = e.detail.value;
		} else {
			uni.showToast({
				title: '手机号格式错误',
				icon: 'none'
			})
		}
	}

	//密码
	const onChangePassword = (e) => {
		password.value = e.detail;
	}

	//推荐人名称
	const onChangeName = (e) => {
		referrerName.value = e.detail
	}

	//推荐人手机号
	const onChangePhone = (e) => {
		let res = validatePhoneNumber(e.detail.value);
		if (res) {
			referrerPhone.value = e.detail.value;
		} else {
			uni.showToast({
				title: '手机号格式错误',
				icon: 'none'
			})
		}
	}

	//登陆
	const handleLogin = async () => {
		try {
			if (!account.value || !password.value) {
				uni.showToast({
					title: '账号和密码不能为空',
					icon: 'none'
				});
				return;
			}
			// Simulate login API call
			const response = await userApi.ownerRegister({
				phoneNumber: account.value,
				driverPwd: password.value,
				driverLeader: referrerName.value,
				leaderPhone: referrerPhone.value,
				openId: currentOpenId.value
			});
			if (response) {
				uni.showToast({
					title: '注册成功',
					icon: 'success',
					success() {
						uni.navigateBack({
							delta: 1
						})
					}
				})

			}
		} catch (error) {
			//TODO handle the exception
		}
	};

	onLoad((options) => {
		currentOpenId.value = options.openId;
	})
</script>

<style scoped>
	.login-container {
		padding: 0;
		height: 100vh;
		background-color: #fff;
	}

	.header {
		position: relative;
		height: 500rpx;
		margin: 0;
	}

	.input-container {
		width: calc(100% - 136rpx);
		margin-top: 30rpx;
		padding-top: 90rpx;
		padding-left: 68rpx;
		padding-right: 68rpx;
		position: absolute;
		top: 416rpx;
		left: 0;
		background-color: #fff;
		border-radius: 60rpx 60rpx 0 0;
	}

	::v-deep .van-cell {
		background-color: #f3f3f3;
		border-radius: 40rpx;
	}


	.header-text {
		position: absolute;
		bottom: 150rpx;
		left: 60rpx;
	}
</style>